<script setup lang="ts">
  import CaImage from "./captcha/Image.vue";

  const props = defineProps({
    appId: {
      type: String,
      required: true,
    },
    scheme: {
      type: String,
      default: "Default",
    },
  });
  const emit = defineEmits(["success", "loaded", "fail"]);
  const isFocus = ref(false);
  const isFail = ref(false);
  const isSuccess = ref(false);
  const modelValue = defineModel({ type: String });
  const iptValue = ref("");
  const caImage = ref<typeof CaImage>();

  function onFocusIn() {
    isFocus.value = true;
  }
  function onFocusOut() {
    isFocus.value = false;
  }

  function onCaImageLoaded() {
    isFail.value = false;
    isSuccess.value = false;
    emit("loaded");
    // iptValue.value = "";
  }
  function onCaImageError() {
    isFail.value = true;
    isSuccess.value = false;
    modelValue.value = "";
    emit("fail");
  }
  function onCaImageSuccess(data) {
    isFail.value = false;
    isSuccess.value = true;
    modelValue.value = data.token;
    emit("success", data);
  }
  function onInputChanged() {
    if (iptValue.value.length >= 4) {
      isFail.value = false;
      isSuccess.value = false;
      caImage.value.doValidCaptcha(iptValue.value);
    }
  }
</script>

<template>
  <div class="d-flex align-items-center">
    <label class="d-flex align-items-center rounded-1 input flex-grow-1 me-3"
           :class="{
             'is-focus':isFocus,
             'is-success':modelValue && isSuccess,
             'is-fail':isFail
           }">
      <i class="bi bi-shield-lock-fill ps-3 fs-4"></i>
      <input autocomplete="new-captcha"
             class="w-100 h-100 py-3 px-3"
             placeholder="请输入验证码"
             :readonly="Boolean(modelValue) && isSuccess"
             @blur="onFocusOut"
             @change="onInputChanged"
             @focus="onFocusIn"
             v-model.lazy="iptValue" />
    </label>
    <ca-image ref="caImage"
              :appId="props.appId"
              class="ca-image border rounded-1 ms-auto"
              :scheme="props.scheme"
              @fail="onCaImageError"
              @loaded="onCaImageLoaded"
              @success="onCaImageSuccess"></ca-image>
  </div>
</template>

<style lang="scss" scoped>
  .input {
    outline-offset: 10px;
    outline: 5px solid transparent;
    background-color: var(--theme-gray-200);
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    box-sizing: border-box;

    > input {
      background-color: transparent;
      border: none;
      outline: none;

      &::placeholder {
        color: var(--theme-gray-500);
      }
    }

    &.is-focus {
      outline-offset: 0;
      background-color: var(--theme-gray-100);
      outline-color: rgba(var(--theme-primary-rgb), 0.4);
    }
    &.is-success {
      border-color: var(--theme-success);
      color: var(--theme-success);
    }
    &.is-fail {
      border-color: var(--theme-danger);
      color: var(--theme-danger);
    }
  }

  .ca-image {
    outline-offset: 10px;
    outline: 5px solid transparent;
    transition: all 0.2s ease-in-out;

    &:focus-visible {
      outline-offset: 0;
      background-color: var(--theme-gray-100);
      outline-color: rgba(var(--theme-primary-rgb), 0.4);
    }
  }
</style>
